<template lang="pug">
.role
  .top-list
    el-input(v-model="name" placeholder="请输入内容" clearable @clear="onSea")
    el-button(type="primary" @click="onSea") 查找
    el-button(type="primary" @click="dialogVisible = true" v-p="['admin.role.create']") 添加
  .bottom-list
    el-table(:data="list" border style="width=100%")
      el-table-column(label="角色名称" prop="name" sortable)
      el-table-column(label="说明" prop="desc")
      el-table-column(label="操作" fixed="right")
        template(slot-scope="scope")
          el-button(type="primary" size="mini" @click="onEdit(scope.row.id)" v-p="['admin.role.update']") 编辑
          el-button(type="danger" size="mini" @click="onDel(scope.row.id)" v-p="['admin.role.delete']") 删除
          el-button(type="primary" size="mini" @click="onGrant(scope.row.id)" v-p="['admin.role.permission']") 授权
  el-pagination(:current-page="page+1" :page-size="limit" :total="total" :page-sizes="[5,20,50,100]" layout="total, sizes, prev, pager, next, jumper" @size-change="onSizeChange" @current-change="onCurrentChange")
  el-dialog(title="创建" :visible.sync="dialogVisible" width="40%")
    el-form(:model="formData" label-width="80px")
      el-form-item(label="角色名称")
        el-input(v-model="formData.name")
      el-form-item(label="说明")
        el-input(v-model="formData.desc")
    span(slot="footer" class="dialog-footer")
    el-button(@click="dialogVisible = false") 取 消
    el-button(type="primary" @click="onAdd") 确 定
  .grantList
    grant-box(:permiList="permiList" :rolePermList='rolePermList' v-model="show" @onPer="onPerm")
</template>
<script>
import GrantBox from '@/components/GrantBox.vue'
export default {
  components: {
    GrantBox
  },
  data() {
    return {
      list:[],
      formData:{
        name:'',
        desc:''
      },
      dialogVisible:false,
      page:0,
      limit:5,
      total:0,
      permiList:[],
      rolePermList:[],
      show:false,
      perID:0,
      name:''
    }
  },
  created() {
    this.data()
  },
  methods: {
    data() {
      const {page, limit, name} = this;
      this.axios.get('/role/list',{
        params:{
          page, limit, name
        }
      }).then(({data}) => {
      console.log(data);
      if(!data.errcode) {
        this.list=data.data.list,
        this.total = data.data.total
      }
    })
    },
    onAdd() {
      this.axios.post('/role/add',{...this.formData}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.dialogVisible = false
          this.data()
        }
      })
    },
    // 编辑
    onEdit(row) {
      console.log(row);
      this.dialogVisible = true
      this.axios.post('/role/edit',{id:row,...this.formData}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.dialogVisible = false
          this.data()
        }
      })
    },
    // onSea查找
    onSea() {
      this.data()
    },
    // 删除
    onDel(row) {
      this.axios.post('/role/delete',{id:row}).then(({data})=> {
        if(!data.errcode) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
          this.data()
        }
      })
    },
    // 授权
    onGrant(row) {
      this.show = true
      this.perID = row
      this.axios.get('/permission/list').then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.permiList = data.data
        }
      }),
      this.axios.get('/role/detail',{params:{id:row}}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.rolePermList = data.data.permissions
        }
      })
    },
    // 授权确定
    onPerm(str) {
      this.show = false
      this.axios.post('/role/set',{id:this.perID,permissions:str}).then(({data})=> {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            type:"success",
            message:'授权成功'
          })
        }
        this.data()
      })
    },
    // pageSize 改变时会触发
    onSizeChange(size){
      console.log(size);
      this.limit = size;
      this.page = 0;
      this.data()
    },
    // currentPage 改变时会触发
    onCurrentChange(page) {
      console.log(page);
      this.page = page -1;
      this.data()
    },
  },
}
</script>
<style lang="sass">
.role
  padding: 0 10px
  .top-list
    padding: 10px 0
    .el-input
      width: 153px
</style>
